@import '~src/theme.scss';
@import '~@angular/material/theming';
$primary: mat-palette($homerprimary);
$accent:  mat-palette($homeraccent);
.chart-container {
    height: 100%;
    .fold {
        width: 100%;
        font-size: 10px;
        background-color: #eee;
        text-align: center;
        vertical-align: middle;
    }
    .legend {
        // display: flex;
        height: 60px;
        width: 100%;
        transition: 0.3s;
        justify-content: space-around;
        flex-wrap: wrap;
        overflow-x: hidden;
        overflow-y: auto;
        .legend-item {
            display: flex;
            cursor: pointer;
            height: 20px;
            width: auto;
            min-width: 84px;
            margin: 8px;
            padding: 5px;
            align-items: center;
            white-space: nowrap;

            // transform: rotateZ(90deg);
            .legend-token {
                flex: 0 0 16px;
                height: 2px;
                margin-right: 3px;
            }
            .crossed {
                text-decoration: line-through;
            }
        }
        &.hidden {
            min-height: 0px;
            max-height: 0px;
        }
    }
    // .legend:hover {
    //     height: auto;
    //     min-height: 50px;
    //     max-height: 200px;
    //     overflow-y: auto;
    // }
}
.fill-container {
    height: calc(100% - 60px);
}
cdk-virtual-scroll-viewport {
    &.clickhouse-legend-wrapper {
        &::-webkit-scrollbar {
            display: none;
        }

        -ms-overflow-style: none;
        /* IE and Edge */
        scrollbar-width: none;

        margin-right: -1rem;
        display: flex;
        justify-content: flex-start;
        min-height: 100%;
        width: 100%;
        transform: rotateZ(90deg);
        transform-origin: center;
        /*
        .cdk-virtual-scroll-content-wrapper {
            display: flex;
        } */
    }
}
.virtual-scrollbar {
    position: absolute;
    // background: aqua;
    width: 22px;
    top: 0;
    bottom: 0;
    right: 0;
    overflow: auto;
    z-index: 999;
}
.example-viewport {
    height: 60px;
    width: 100%;
}
.example-viewport:last-child {
    padding-right: 10px;
}
.example-viewport .cdk-virtual-scroll-content-wrapper {
    display: flex;
    flex-direction: row;
}

.cdk-virtual-scroll-data-source-example .example-item {
    width: auto;
    padding-top: 10px;
    height: 40px;
    /* transform: rotateZ(-90deg); */
    transform-origin: center;
}
.legend-text {
    font-size: 85%;
}
